<template>
  <div class="mailboxSettings" id="nav-bar">
    <div>
      <van-nav-bar
        title="邮箱设置"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </div>
    <div class="selectEmail" v-for="(itme, index) of emailList" :key="index">
      <div>
        <van-form>
          <van-field
            v-model="itme.mail"
            required
            placeholder="请输入邮箱"
            :rules="[
              {
                pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.(com|cn|net)/,
                message: '请输入正确邮箱',
              },
            ]"
          >
            <template #right-icon>
              <van-icon @click="editClick(itme)" name="edit" />
            </template>
          </van-field>
        </van-form>
      </div>
      <div class="defaultEmail">
        <van-radio-group v-model="isDefault">
          <van-radio icon-size="15px" @click="radioClick(itme)" :name="itme.id"
            >默认邮箱</van-radio
          >
        </van-radio-group>
        <van-icon @click="deleteClick(itme)" name="delete-o" />
      </div>
    </div>
    <div class="comfirmbtn" @click="editShow = true">添加邮箱</div>
    <van-action-sheet class="content" v-model="editShow">
      <div class="addEmail">添加邮箱</div>
      <van-cell-group style="margin: 10px">
        <van-field
          required
          v-model="value"
          placeholder="请输入邮箱"
          :rules="[
            {
              pattern: /\w+([-+.]\w+)*@\w+([-.]\w+)*\.(com|cn|net)/,
              message: '请输入正确邮箱',
            },
          ]"
        />
      </van-cell-group>
      <div class="comfirmbtn" @click="comfirmClick">确定</div>
    </van-action-sheet>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      value: "",
      editShow: false,
      chosenContactId: "",
      isDefault: "",
      emailList: [],
    };
  },
  created() {
    this.getEmail();
  },
  computed: {
    ...mapGetters(["userInfo", "schoolConfig"]),
  },
  methods: {
    //获取邮箱列表
    getEmail() {
      this.$toast.loading({
        methods: "加载中...",
      });
      this.$http({
        url: "/private-xm/User/getEmailList",
        method: "post",
      })
        .then((res) => {
          this.$toast.clear();
          res.data.forEach((item) => {
            if (item.isDefault === 1) {
              this.isDefault = item.id;
            }
          });
          this.emailList = res.data;
        })
        .catch((error) => {
          this.$toast.clear();
          this.$$toast(error);
        });
    },
    //默认邮箱
    radioClick(row) {
      this.$toast.loading({
        message: "加载中...",
      });
      this.$http({
        url: "/private-xm/User/changeDefaultEmail",
        method: "post",
        data: {
          id: row.id,
        },
      })
        .then((res) => {
          this.$toast.clear();
          this.emailList = res.data;
        })
        .catch((error) => {
          this.$toast.clear();
          this.$toast.fail(error);
        });
    },
    //修改邮箱
    editClick(itme) {
      if (this.emailList.filter((v) => !v.mail).length) {
        this.$toast("邮箱不能为空");
        return;
      }
      this.$http({
        url: "/private-xm/User/changeEmail",
        method: "post",
        data: this.emailList.map((v) => ({
          id: v.id,
          mail: v.mail,
          userId: this.userInfo.userId,
          schoolCode: this.schoolConfig.schoolCode,
        })),
      })
        .then((res) => {
          this.$toast.success("修改成功");
          this.emailList = res.data;
        })
        .catch((error) => {
          this.$toast.fail(error);
        });
    },
    //删除邮箱
    deleteClick(itme) {
      Dialog.confirm({
        message: "确定删除该邮箱！",
      })
        .then(() => {
          this.$http({
            url: "/private-xm/User/delEmail",
            method: "post",
            data: {
              id: itme.id,
            },
          }).then((res) => {
            this.$toast.success("删除成功");
            this.emailList = res.data;
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    //保存邮箱
    comfirmClick() {
      this.$toast.loading({
        message: "添加中...",
      });
      this.$http({
        url: "/private-xm/User/addEmail",
        method: "post",
        data: {
          mail: this.value,
        },
      })
        .then((res) => {
          this.editShow=false;
          this.$toast.clear();
          this.$toast.success("添加成功");
          this.emailList = res.data;
        })
        .catch((error) => {
          this.$toast.clear();
          this.$toast.fail(error);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/styles/variable";
#nav-bar ::v-deep .van-nav-bar__title{
		color: #fff;
    font-size: .506667rem /* 19/37.5 */;
  }
.mailboxSettings {
  margin: 0.266667rem 0;
  .van-nav-bar {
    background: none;
    margin-bottom: 0.8rem /* 30/37.5 */;
  }
  .van-nav-bar__title {
    font-weight: 600;
    color: #fff;
  }
  .van-nav-bar .van-icon {
    color: #111;
  }
  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
  .van-cell {
    font-size: 0.426667rem+$fontsize /* 16/37.5 */;
  }
  .van-icon-delete-o {
    font-size: 0.426667rem +$fontsize/* 16/37.5 */;
  }
  .van-icon-edit {
    color: #54acfd;
    font-size: 0.426667rem +$fontsize/* 16/37.5 */;
  }
  .selectEmail {
    width: 9.226667rem /* 346/37.5 */;
    height: 3.093333rem /* 116/37.5 */;
    background: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(35, 24, 21, 0.11);
    border-radius: 0.266667rem /* 10/37.5 */;
    margin: 0 0 0.533333rem /* 20/37.5 */ 0.346667rem /* 13/37.5 */;
    border: 1px solid #c3bdbd;
    display: inline-grid;
    align-items: center;
  }
}
.content {
  height: 4.8rem /* 180/37.5 */;
  padding: 0.346667rem /* 13/37.5 */;
  box-sizing: border-box;

  .addEmail {
    font-weight: 500;
    font-size: 0.613333rem+$fontsize /* 23/37.5 */;
  }
}
.defaultEmail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.266667rem /* 10/37.5 */ 0.453333rem /* 17/37.5 */;
  border-top: 0.026667rem /* 1/37.5 */ solid #c3bdbd;
}
</style>
